<!--  -->
<template>
<div class="mytodos">
    <div class="mytodos-header">
        <h1>todos</h1>
    </div>
    <div class="mytodos-content">
        <div class="mytodos-content-top">
            <div :class="{ allChecked: allChecked }" @click="handleAllCheck">❯</div>
            <input v-model="inputValue" @keyup.enter="saveTodo" type="text" placeholder="What needs to be done?" />
        </div>
        <div class="mytodos-content-mid">
            <div v-for="(item, index) in filterTodos" class="mid-list-item" @dblclick="handleEditTodo(index)" :key="item.id">
                <input type="checkbox" v-model="item.status" class="list-item-left" />
                <span :class="['list-item-mid', { completed: item.status }]">{{
            item.text
          }}</span>
                <input type="text" v-todo-focus="edit_index == index" :class="['inputText', { hidden: edit_index !== index }]" v-model="item.text" @blur="saveEditTodo(item, index)" />
                <button @click="deleteTodo(index)" class="list-item-right">×</button>
            </div>
        </div>
        <div class="mytodos-content-bottom">
            <div class="content-bottom-left">
                <span>{{ remaining }}</span> items left
            </div>
            <div class="content-bottom-mid">
                <div :class="['all', { selected: activeTab === 'all' }]" @click="handleItemClick('all')">
                    All
                </div>
                <div :class="['active', { selected: activeTab === 'active' }]" @click="handleItemClick('active')">
                    Active
                </div>
                <div :class="['completed', { selected: activeTab === 'completed' }]" @click="handleItemClick('completed')">
                    Completed
                </div>
            </div>
            <div class="content-bottom-right" @click="clearCompleted">
                Clear completed
            </div>
        </div>
    </div>
    <div class="mytodos-foot">
        <p>Double-click to edit a todo</p>
        <p>
            Written by
            <a href="#">Daping Liu</a>
        </p>
        <p>
            Part of
            <a href="#">MyTodos</a>
        </p>
    </div>
</div>
</template>

<script>
import {
    mapGetters,
    mapState
} from "vuex";
export default {
    data() {
        return {
            edit_index: -1,
            inputValue: "",
        };
    },
    computed: {
        ...mapGetters(["remaining", "filterTodos", "allChecked", "activeTab"]),
        ...mapState(['todos'])
    },
    watch: {
        todos: {
            handler: function (newTodos) {
                localStorage.setItem("todos-vuex", JSON.stringify(newTodos));
            },
            deep: true,
        },
    },
    methods: {
        clearCompleted: function () {
            this.$store.commit('clearCompleted')
        },
        saveEditTodo: function (item, index) {
            this.edit_index = -1;
            item.text = item.text.trim();
            if (!item.text) {
                this.deleteTodo(index);
            }
        },
        handleEditTodo: function (index) {
            this.edit_index = index;
        },
        handleAllCheck: function () {
            this.$store.commit('handleAllCheck')
        },
        handleItemClick: function (activeTab) {
            this.$store.commit({
                type: 'handleItemClick',
                payload: {
                    activeTab
                }
            })
        },
        deleteTodo: function (index) {
            this.$store.commit({
                type: 'deleteTodo',
                payload: {
                    index
                }
            })
        },
        saveTodo: function () {
            this.inputValue = this.inputValue.trim();
            if (!this.inputValue) {
                this.$message({
                    message: "警告，内容不能为空",
                    type: "warning",
                });
                return false;
            };
            this.$store.commit({
                type: 'addTodo',
                payload: {
                    text: this.inputValue,
                    status: false,
                    id: Date.now(),
                }
            });
            this.inputValue = "";
        },
    },
    directives: {
        "todo-focus": function (el, binding) {
            if (binding.value) {
                el.focus();
            }
        },
    },
};
</script>

<style lang="less" scoped>
.mytodos {
    width: 550px;
    margin: 0 auto;

    .mytodos-header {
        width: 100%;

        h1 {
            line-height: 130px;
            width: 100%;
            font-size: 100px;
            font-weight: 100;
            text-align: center;
            color: rgba(175, 47, 47, 0.15);
        }
    }

    .mytodos-content {
        width: 100%;
        background: #fff;
        margin: 0px 0 40px 0;
        position: relative;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);

        .mytodos-content-top {
            width: 100%;
            height: 65px;
            display: flex;
            align-items: center;
            position: relative;

            div {
                position: absolute;
                left: -10px;
                width: 65px;
                height: 45px;
                padding: 10px 27px 10px 27px;
                font-size: 22px;
                color: #e6e6e6;
                text-align: center;
                transform: rotate(90deg);
                user-select: none;
            }

            div.allChecked {
                color: #737373;
            }

            input {
                width: 550px;
                height: 65px;
                padding: 16px 16px 16px 60px;
                border: none;
                outline: none;
                font-size: 24px;
                line-height: 1.4em;
                box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
            }

            input::-webkit-input-placeholder {
                color: #e6e6e6;
                font-style: italic;
            }
        }

        .mytodos-content-mid {
            position: relative;
            z-index: 2;
            border-top: 1px solid #e6e6e6;

            .mid-list-item {
                display: flex;
                height: 59px;
                font-size: 24px;
                border-bottom: 1px solid #ededed;
                align-items: center;
                position: relative;

                .list-item-left {
                    position: absolute;
                    width: 40px;
                    height: 40px;
                    opacity: 0;
                }

                .list-item-left:checked+.list-item-mid {
                    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E);
                }

                .list-item-mid {
                    width: 550px;
                    height: 58px;
                    padding: 15px 15px 15px 60px;
                    display: block;
                    line-height: 1.2;
                    font-size: 24px;
                    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E);
                    background-repeat: no-repeat;
                    background-position: center left;
                    transition: color 0.4s;
                }

                .inputText {
                    position: absolute;
                    z-index: 10;
                    display: block;
                    width: 506px;
                    padding: 12px 16px;
                    font-size: 24px;
                    line-height: 1.4em;
                    border: 1px solid #999;
                    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
                    margin: 43px;
                    outline: none;
                }

                .inputText.hidden {
                    display: none;
                }

                .completed {
                    color: #d9d9d9;
                    text-decoration: line-through;
                }

                .list-item-right {
                    display: none;
                    width: 40px;
                    height: 40px;
                    color: #cc9a9a;
                    font-size: 30px;
                    border: none;
                    background: none;
                    position: absolute;
                    right: 10px;
                    outline: none;
                }

                .list-item-right:hover {
                    color: #af5b5e;
                }
            }

            .mid-list-item:hover {
                .list-item-right {
                    display: block;
                }
            }
        }

        .mytodos-content-bottom {
            color: #777;
            padding: 10px 15px;
            height: 41px;
            text-align: center;
            border-top: 1px solid #e6e6e6;
            display: flex;
            justify-content: space-between;

            div {
                z-index: 1;
            }

            .content-bottom-left {
                user-select: none;
            }

            .content-bottom-mid {
                display: flex;
                align-items: center;

                div {
                    margin: 0 10px;
                    padding: 2px 7px;
                    border: 1px solid transparent;
                    border-radius: 3px;
                    user-select: none;
                    cursor: pointer;
                }

                div:hover {
                    border-color: rgba(175, 47, 47, 0.1);
                }

                div.selected {
                    border-color: rgba(175, 47, 47, 0.2);
                }
            }

            .content-bottom-right {
                user-select: none;
                cursor: pointer;
            }

            .content-bottom-right:hover {
                text-decoration: underline;
            }
        }

        .mytodos-content-bottom::before {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 50px;
            overflow: hidden;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
                0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
                0 17px 2px -6px rgba(0, 0, 0, 0.2);
        }
    }

    .mytodos-foot {
        margin: 65px auto 0;
        color: #bfbfbf;
        font-size: 10px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        text-align: center;

        p {
            line-height: 1;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;

            a {
                color: inherit;
                text-decoration: none;
                font-weight: 400;
            }
        }
    }
}
</style>
